<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wangzm
 * @LastEditTime: 2020-03-11 20:55:06
 * @description: file content
 -->
<template>
  <base-page-view ref="pageView" class-name="page-container">
    <view v-if="dataList.length <= 0 && listQuery.nomore" class="mine-collection">
      <msg-page text="暂无收藏的内容" type="empty_address" btn-text="去逛逛" @btnClick="goLook" />
    </view>
    <swipe-action>
      <view v-for="(item, index) in dataList" :key="index" class="list-box">
        <swipe-action-item :options="options" @click="onClick($event, item)">
          <view class="list-item" @click="toGoodsDetail(item)">
            <view class="listImg">
              <image :src="item.pic" class="item-img" />
              <image v-if="item.tag_img" class="item-tag" :src="item.tag_img" />
              <view v-if="(item.status === 4 && item.status !== 0)" class="maskIm">
                <image src="/static/images/cart/img_Soldout.png" />
              </view>
              <view v-if="(item.status === 5 && item.status !== 0)" class="maskIm">
                <image src="/static/images/cart/img_SoldDown.png" />
              </view>
            </view>
            <view class="listDetail">
              <view class="titleBox">
                <view class="o-p">{{ item.title }}</view>
                <view class="volumeBox">
                  <text v-if="item.volume" class="volume o-span">
                  <!-- {{item.volume > 9999 ? (item.volume/10000).toFixed(1) + '万' : item.volume}}人已买 -->
                  </text>
                </view>
              </view>
              <view class="priceBox">
                <view class="vipPrice">
                  <text class="o-small">¥</text> {{ item.vip_price | formatMoney }}
                </view>
                <view class="normalPrice"> ¥ {{ item.price | formatMoney }}</view>
              <!-- <view v-if="item.commission" class="commission">
                  最高佣金: ¥{{item.commission.toFixed(2)}}
                </view> -->
              </view>
            </view>
          </view>
        </swipe-action-item>
      </view>
    </swipe-action>
    <view v-if="listQuery.loading && !listQuery.nomore" class="no-tip">-- 加载中 --</view>
    <view v-if="!listQuery.loading && listQuery.nomore && dataList.length > 0" class="no-tip">没有更多数据了</view>
    <confirmPopup ref="confirm" />
  </base-page-view>
</template>

<script>
import { toGoods } from '@/utils/navigateTo'
import swipeAction from '@/components/swipeAction/uni-swipe-action/uni-swipe-action.vue'
import swipeActionItem from '@/components/swipeAction/uni-swipe-action-item/uni-swipe-action-item.vue'
import confirmPopup from '@/components/confirmPopup/index'
import MsgPage from '@/components/msgPage'
import './index.scss'
export default {
  components: {
    swipeAction,
    swipeActionItem,
    MsgPage,
    confirmPopup
  },
  data() {
    return {
      dataList: [],
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#ddd'
          },
          icon: '/static/images/cart/cart_delete.png'
        }
      ],
      listQuery: {
        page_no: 1,
        page_size: 10,
        loading: false,
        nomore: false
      }
    }
  },
  onShow() {
    this.dataList = []
    this.listQuery = {
      page_no: 1,
      page_size: 10,
      loading: false,
      nomore: false
    }
    this.getBookmarks()
  },
  methods: {
    onClick(e, item) {
      this.$refs.confirm.show({
        title: '提示',
        content: `确定删除${item.title}吗？`,
        yesCb: () => {
          this.deleteCollecttArray(item)
        }
      })
    },
    goLook() {
      this.$navigateTo('/pages/home/index', '', 'switchTab')
    },
    async getBookmarks() {
      if (this.listQuery.loading) true
      this.listQuery.loading = true
      const res = await this.$api.mineApi.getBookmarks({
        status: '',
        page_no: this.listQuery.page_no,
        page_size: this.listQuery.page_size
      })
      if (res.success && res.data) {
        this.dataList = this.dataList.concat(res.data)
        if (res.data && res.data.length < this.listQuery.page_size) {
          this.listQuery.nomore = true
        }
      } else {
        this.dataList = []
        this.listQuery.nomore = true
      }
      this.listQuery.loading = false
    },
    toGoodsDetail(item) {
      toGoods(item, 'navigateTo', {
        preseat: '商品列表',
        firstseat: '我的收藏'
      })
    },
    async deleteCollecttArray(item) {
      const res = await this.$api.mineApi.deleteBookmarks({ goods_id: item.goods_id, goods_type: item.type })
      if (res.success) {
        uni.showToast({
          title: '删除成功',
          icon: 'none',
          duration: 2000,
          mask: true,
          success: () => {
            const index = this.dataList.findIndex(i => item.goods_id === i.goods_id)
            this.dataList.splice(index, 1)
          }
        })
      }
    }
  },
  onReachBottom() {
    if (this.listQuery.loading || this.listQuery.nomore) return
    this.listQuery.page_no++
    this.getBookmarks()
  },
  onPageScroll(res) {
    this.$refs.pageView.scrollShowBtn(res)
  }
}
</script>
